<!-- 订单 -->
<template>
  <div class="order">
    <div class="search">
      <el-form ref="formInline" :inline="true" :model="page" class="demo-form-inline">
        <el-form-item label="订单编号:">
          <el-input v-model="page.orderNo" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="选择日期：">
          <el-date-picker
            v-model="selectData"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="searchBtn" style="padding:0;" @click="btnOK">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <Table :table-data="orderList" :page="page" :labels="labels">
        <template #orderNo="{scope}">
          <el-tooltip class="items" effect="dark" :content="scope.orderNo" placement="top">
            <div class="hidden">{{ scope.orderNo }}</div>
          </el-tooltip>
        </template>
        <template #price="{scope}">
          <div>{{ formatePrice(scope) }}</div>
        </template>
        <template #status="{scope}">
          <div>{{ formateStatus(scope) }}</div>
        </template>
        <template #updateTime="{scope}">
          <div>{{ formateData(scope) }}</div>
        </template>
        <template #operation="{scope}">
          <el-button @click="detail(scope)">查看详情</el-button>
        </template>
      </Table>
      <page :total="+list.totalCount" :current-page.sync="page.pageIndex" :total-page="+list.totalPage" />
    </el-card>
    <viewDetailDialog :detail-list="detailList" :show-detaildialog="showDetaildialog" />
  </div>
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Table from '@/components/equipment/table.vue'
import page from '@/components/equipment/page.vue'
import { searchOrder } from '@/api/order'
import dayjs from 'dayjs'
import viewDetailDialog from './components/viewDetailDialog.vue'
export default {
  name: 'Order',
  components: { Table, page, viewDetailDialog },
  props: {
  },
  data() {
    return {
      page: {
        pageIndex: 1,
        pageSize: 10,
        orderNo: null,
        startDate: null,
        endDate: null
      },
      selectData: '',
      typePage: {
        pageIndex: 1,
        pageSize: 100000
      },
      list: {},
      labels: {
        orderNo: '订单编号',
        skuName: '商品名称',
        'price': '订单金额(元)',
        innerCode: '设备编号',
        'status': '订单状态',
        'updateTime': '订单日期'
      },
      orderList: [],
      showDetaildialog: false,
      detailList: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {
    formatePrice() {
      return ({ price }) => {
        return (price / 100).toFixed(2)
      }
    },
    formateStatus() {
      return ({ status }) => {
        if (status === 0) {
          return '未支付'
        } else if (status === 1) {
          return '支付完成'
        } else if (status === 2) {
          return '出货成功'
        } else {
          return '出货失败'
        }
      }
    },
    formateData() {
      return ({ updateTime }) => {
        console.log(updateTime)
        return dayjs(updateTime).format('YYYY.MM.DD HH:mm:ss')
      }
    }
  },
  watch: {
    page: {
      deep: true,
      handler() {
        this.searchOrder()
      }
    }
  },
  // 监控data中的数据变化
  created() {
    this.searchOrder()
  },
  // 方法集合
  methods: {
    async searchOrder() {
      const data = await searchOrder(this.page)
      this.orderList = data.data.currentPageRecords
      this.list = data.data
      console.log(data.data)
    },
    btnOK() {
      this.page = {
        pageIndex: 1,
        pageSize: 10,
        orderNo: null,
        startDate: null,
        endDate: null
      }
      if (this.selectData !== '' && this.selectData !== null) {
        this.page.startDate = dayjs(this.selectData[0]).format('YYYY-MM-DD')
        this.page.endDate = dayjs(this.selectData[1]).format('YYYY-MM-DD')
      }
      this.searchOrder()
    },
    detail(scope) {
      console.log(scope)
      this.detailList = scope
      this.showDetaildialog = true
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.el-button{
  padding: 0 !important;
  border: none;
}
.cell{
  .el-button--default{
  color: #5f84ff;
}
}
.hidden{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search{
    background: #fff;
    height: 64px;
    margin-bottom: 20px;
  }
  .el-form-item__label{
    margin-left: 15px;
    font-weight: normal;
    line-height: 64px;
  }
  .el-form-item__content{
    line-height: 64px;
  }
  .el-input__inner{
    height: 36px;
  }
  .searchBtn{
    height: 36px;
    visibility:visible;
    width: 80px;
  }
</style>
